import React, { ReactElement, useContext } from 'react';
import { View, Text, Image } from 'react-native';

import {
  closeMicrophoneWhite,
  openMicrophoneWhite
} from '../../../../constant/resource';
import styles from './style';
import { Store } from '../../reducer';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { isOpenMicrophone, showOpenMicrophone } = state;

  if (!showOpenMicrophone) return <View />;

  return (
    <View style={styles.content}>
      {isOpenMicrophone ? (
        <View style={styles.container}>
          <Image style={styles.icon} source={openMicrophoneWhite} />
          <Text style={styles.desc}>麦克风已开启</Text>
        </View>
      ) : (
        <View style={styles.container}>
          <Image style={styles.closeIcon} source={closeMicrophoneWhite} />
          <Text style={styles.desc}>麦克风已关闭</Text>
        </View>
      )}
    </View>
  );
};
